<!--
 * @Author: boyyang
 * @Date: 2022-01-08 22:59:41
 * @LastEditTime: 2022-02-05 22:01:05
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\home\homeMenuHeader.vue
-->

<template>
    <div class="header">
        <div class="header-avater" @click="headerClick">
            <img :src="props.header" />
        </div>
        <div class="nick-name" v-show="props.isShowName">{{ props.name }}</div>
    </div>
</template>

<script lang="ts" setup>
interface IHomeMenuHeaderProps {
    header: string;
    name: string;
    isShowName?: boolean;
    size?: string | number;
    borderColor?: string;
}

interface IHomeMenuHeaderEmits {
    (e: 'headerClick'): void
}

const props = withDefaults(defineProps<IHomeMenuHeaderProps>(), {
    header: '',
    name: '',
    isShowName: true,
    size: 60,
    borderColor: '#ff0097'
})

const emits = defineEmits<IHomeMenuHeaderEmits>()

const headerClick = () => {
    emits('headerClick')
}

</script>

<style scoped lang="scss">
.header {
    padding: 15px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .header-avater {
        box-sizing: border-box;
        width: calc(v-bind("props.size") * 1px);
        height: calc(v-bind("props.size") * 1px);
        background-color: #fff;
        border-radius: 100%;
        border: 2px solid v-bind("props.borderColor");
        overflow: hidden;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;

        transition: all 1s linear;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }

    .nick-name {
        font-size: 17px;
        color: whitesmoke;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
</style>

